<template>
  <view class="tabsWrap">
    <CommonTabs v-model="tabsId" :tabs="tabs"/>

    <view class="bellIcon" @click="goMessage">
      <up-icon name="bell" size="50rpx" color="#333333"/>
      <view class="badge">
        <up-badge
          numberType="overflow"
          bgColor="#E60014"
          max="99"
          :value="messageCount"
          :showZero="true"
        ></up-badge>
      </view>
    </view>
  </view>
</template>

<script setup>
import {computed, ref} from "vue";
import CommonTabs from "../common/tabs.vue";
import articleManagement from '@/api/articleManagement'
import {useStore} from "vuex";

const props = defineProps({
  type: {
    type: String,
    default: "index", // search
  },
});

const pageType = props.type;

const tabsId = ref(1);

const tabs = computed(() => {
  if (pageType === "index") {
    return [
      {
        name: "关注",
        id: 1,
      },
      {
        name: "交易",
        id: 2,
      },
      {
        name: "交流",
        id: 3,
      },
    ];
  } else if (pageType === "search") {
    return [
      {
        name: "用户",
        id: 1,
      },
      {
        name: "交易",
        id: 2,
      },
      {
        name: "交流",
        id: 3,
      },
    ];
  }
});

const messageCount = ref(0);
const store = useStore();
const goMessage = () => {
  uni.navigateTo({url: "/pages/message/index"});
};

// 获取消息数量
async function getMessageCount() {
  const userInfo = await store.dispatch("user/getUserInfo")
  if (userInfo) {
    articleManagement.getAllMessage(userInfo.userId).then((res) => {
      console.log("getAllMessage index", res, store.state.user.userInfo)
      messageCount.value = res.data.length;
    });
  }

}

getMessageCount()
</script>

<style lang="scss">
.tabsWrap {
  display: flex;
  justify-content: center;
  position: relative;
  background: #fff;
}

.bellIcon {
  position: absolute;
  top: 20rpx;
  right: 38rpx;

  .badge {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate3d(50%, -10%, 0);
  }
}
</style>
